import { FC } from "react";
import { View, Button } from "@tarojs/components";
import { useAppDispatch, useAppSelector } from "@/store/index";
import { addNumber, subNumber } from "../../store/feature/counter";
import { getHomeData } from "../../store/feature/home";
import "./index.scss";

const ReduxFunc: FC = function () {
  const storeData = useAppSelector((state) => ({
    counter: state.counter.counter,
    homeData: state.home.homeData,
  }));

  const dispatch = useAppDispatch();

  function addNumberHandle(number: number) {
    dispatch(addNumber(number));
  }
  function subNumberHandle(number: number) {
    dispatch(subNumber(number));
  }

  function getHomeDataHandle() {
    dispatch(getHomeData());
  }

  return (
    <View>
      <View>{storeData.counter}</View>
      <View>{JSON.stringify(storeData.homeData)}</View>
      <Button onClick={() => addNumberHandle(2)}>counter+1</Button>
      <Button onClick={() => subNumberHandle(2)}>counter-1</Button>
      <Button onClick={getHomeDataHandle}>getHomeData</Button>
    </View>
  );
};

export default ReduxFunc;
